<script setup>
import {defineProps, ref, defineEmits, watch, onBeforeMount } from "vue";
const dom = defineProps(['checks','id','modelValue'])
const emit = defineEmits(['modelValue'])
const values = ref([])
onBeforeMount(()=>{
  replaceValue(dom.modelValue)
})
watch(()=>dom.modelValue,(value) => {
  replaceValue(value)
})
watch(values,(value) => {
  emit('update:modelValue',value)
})

function replaceValue(value) {
  values.value = value||[]
}

</script>

<template>
  <div class="form-check form-check-inline" v-for="(value,key) in dom.checks||{}" :id="dom.id||'check'">
    <input class="form-check-input" type="checkbox" :id="`${dom.id}-${key}`" :value="key" v-model="values">
    <label class="form-check-label" :for="`${dom.id}-${key}`" >{{ value }}</label>
  </div>
</template>